<template >
  <div class="page-chat">
    <Nav title="Contact" show="chat" />
    <div class="container" ref="container">
      <template v-for="(v, i) in inputArr">
        <div class="show-box">
          <div class="txt-box">
            <div class="txt">
              <p>{{ v.txt }}</p>
            </div>
            <div class="head">E</div>
          </div>
          <p class="time">{{ v.time }}</p>
        </div>
      </template>
      <div class="end"></div>
    </div>
    <div class="input-box">
      <div class="ipt">
        <input v-model="txt" maxlength="400" type="text" placeholder="Type your message here">
        <img src="/camera.png" alt="图标加载失败">
      </div>
      <div class="send" @click="send">
        <div class="btn">Send</div>
      </div>
    </div>
  </div>
</template>

<script>
import Nav from "../public/nav.vue"

export default {
  components: {
    Nav
  },
  data () {
    return {
      inputArr: [
        {
          txt: "123",
          time: "2023-02-21 20:34:23"
        },
        {
          txt: "23333",
          time: "2023-02-21 20:34:23"
        },
        {
          txt: "长句子测试长句子测试长句子测试长句子测试长句子测试长句子测试长句子测试长句子测试长句子测试长句子测试",
          time: "2023-02-21 20:34:23"
        },
      ],
      txt: ""
    }
  },
  methods: {
    send () {
      if (this.txt) {
        this.inputArr.push({ txt: this.txt, time: '2023-02-21 20:34:23' })
        this.txt = ""
        // 滚动往下
        this.$nextTick(() => {
          let dom = this.$refs.container
          dom.scrollTop = dom.scrollHeight - dom.offsetHeight
        })
      }
    }
  }
}
</script>

<style lang="scss" >
.page-chat {
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;

  .container {
    flex: 1;
    background-color: #f5f5f5;
    text-align: center;
    overflow-y: auto;
    padding-bottom: 52px;

    .show-box {
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      padding: 15px;

      .txt-box {
        @include vC;
        justify-content: flex-end;
        color: #303133;
        font-size: 14px;

        .txt {
          padding: 10px;
          border-radius: 3px;
          display: inline-flex;
          max-width: 100%;
          align-items: center;
          font-size: 15px;
          position: relative;
          min-height: 40px;
          line-height: 20px;
          text-align: left;
          word-wrap: break-word;
          word-break: break-all;
          flex-wrap: wrap;
          background-color: #fff;
          color: #333;
          position: relative;
          margin: 0 20px;
        }

        .txt::before {
          content: "";
          top: 13px;
          -webkit-transform: rotate(45deg);
          transform: rotate(45deg);
          position: absolute;
          z-index: 100;
          display: inline-block;
          overflow: hidden;
          width: 12px;
          height: 12px;
          left: -6px;
          right: auto;
          background-color: inherit;
          left: auto;
          right: -6px;
        }

        .head {
          font-variant: small-caps;
          margin: 0;
          padding: 0;
          display: inline-flex;
          text-align: center;
          justify-content: center;
          align-items: center;
          color: #fff;
          white-space: nowrap;
          position: relative;
          background-size: cover;
          background-position: 50%;
          vertical-align: middle;
          font-size: 1.5em;
          border-radius: 100%;
          background-color: rgb(1, 98, 255);
          width: 40px;
          height: 40px;
          flex-shrink: 0;
        }
      }

      .time {
        font-size: 12px;
        color: #8799a3;
        margin-top: 8px;
        margin-right: 58px;
      }
    }

    .end {
      display: inline-block;
      margin: 10px auto;
      font-size: 12px;
      padding: 4px 6px;
      background-color: rgba(0, 0, 0, .2);
      border-radius: 3px;
      color: #fff;
      max-width: 300px;
      line-height: 1.4;
      overflow-wrap: break-word;
    }
  }

  .input-box {
    @include between;
    position: absolute;
    width: 100%;
    bottom: 0;
    z-index: 1024;
    box-shadow: 0 -0.5px 3px rgb(0 0 0 / 10%);
    padding-right: 10px;
    min-height: 50px;
    background-color: #fff;

    .ipt {
      flex: 1;
      position: relative;
      @include between;

      input {
        width: 267px;
        height: 21px;
        resize: none;
        opacity: 1;
        font: inherit;
        padding: 0px 10px;
        word-break: inherit;
      }

      img {
        width: 24px;
        height: 24px;
        margin-right: 10px;
      }
    }

    .send {
      .btn {
        border-radius: 5px;
        box-shadow: 3px 3px 4px rgb(48 156 63 / 20%);
        background-color: #39b54a;
        color: #fff;
        position: relative;
        border: 0px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        padding: 0 10px;
        font-size: 14px;
        height: 27px;
        line-height: 1;
        text-align: center;
        text-decoration: none;
        overflow: visible;
        margin-left: 0;
        -webkit-transform: translate(0px, 0px);
        transform: translate(0px, 0px);
        margin-right: 0;
      }
    }
  }
}
</style>
